<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
    
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.STYLE1 {font-size: 12px}
.STYLE3 {font-size: 12px; font-weight: bold; }
.STYLE4 {
	color: #03515d;
	font-size: 12px;
}
-->
</style>

<!-- Video -->
<link rel="stylesheet" href="common/html5-video/vendorstyle.css" />
<link rel="stylesheet" href="common/html5-video/demo1/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="common/html5-video/vendorscript.js"></script>
<script src="video.js"></script>
<!--[if lt IE 9]>
<script>
$(document).ready(function() {
	$('.control').hide();
	$('.loading').fadeOut(500);
	$('.caption').fadeOut(500);
});
</script>
<![endif]-->
<!-- video end -->

<link rel="stylesheet" href="common/kindeditor-4.1.3/themes/default/default.css" />
<link rel="stylesheet" href="common/kindeditor-4.1.3/plugins/code/prettify.css" />
<script charset="utf-8" src="common/kindeditor-4.1.3/kindeditor.js"></script>
<script charset="utf-8" src="common/kindeditor-4.1.3/lang/zh_CN.js"></script>
<script charset="utf-8" src="common/kindeditor-4.1.3/plugins/code/prettify.js"></script>
	<script>
		KindEditor.ready(function(K) {
			var editor = K.editor({
			    cssPath : 'common/kindeditor-4.1.3/plugins/code/prettify.css',
				uploadJson : 'uploadDemoAction!uploadImage.action',
				fileManagerJson : 'common/kindeditor-4.1.3/jsp/file_manager_json.jsp',
					allowFileManager : true
				});
				K('#image1').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							//imageUrl : K('#url1').val(),
							clickFn : function(url, title, width, height, border, align) {
								//K('#url1').val(url);
								K('#headImage').val(url);
								var localImagId = document.getElementById("headImage1");
                                    localImagId.src=url;
								editor.hideDialog();
							}
						});
					});
				});
				K('#addPicture').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							//imageUrl : K('#url1').val(),
							clickFn : function(url, title, width, height, border, align) {
								//K('#url1').val(url);
								//K('#headImage').val(url);
								AddElement(url,title);
								//var localImagId = document.getElementById("headImage1");
                                  //  localImagId.src=url;
								editor.hideDialog();
							}
						});
					});
				});
			prettyPrint();
		});
	</script>
	<script language="javascript">
        var SelObj = null;
        function AddElement(url,title)
        {
            var oImg             = document.createElement("IMG");
            oImg.src             = url;
            oImg.width            = 180;
            oImg.height            = 129;
            oImg.title=title;
            oImg.style.cursor    = "hand";
            oFrame.appendChild(oImg);
        }
        function DelElement()
        {
            oFrame.removeChild(SelObj);            
        }
        function SelectImage()
        {
            if(window.event.srcElement.tagName=="IMG")
            {
                if(SelObj!=null)
                {
                    SelObj.border = 0;
                }
                window.event.srcElement.border = 2;
                SelObj = window.event.srcElement;
            }
        }
        function document_onload()
        {
            //document.all.oAddButton.onclick = AddElement;
            document.all.oDelButton.onclick = DelElement;
            document.all.oFrame.onclick        = SelectImage;
        }
        function getDivChild(){
         var childCount =oFrame.childElementCount;
         var imglist=oFrame.getElementsByTagName('IMG') 
           alert(imglist.length);
           for(var i = 0; i < imglist.length; i ++){
              alert(imglist[i].src);
           }
        }
    </script>
    <script>
     function validateForm(){
     var localVar = document.getElementById("newsInfotitle");
      if(localVar.value.length<10||localVar.value.length>50)
       {
           alert("标题不能少于10个字符或不超过50个字符！");
           localVar.focus();
           return false;
       }
      localVar = document.getElementById("newsInfosubtitle");
      if(localVar.value.length<10||localVar.value.length>50)
       {
           alert("副标题不能少于10个字符或不超过50个字符！");
           localVar.focus();
           return false;
       }
       var stringStr="";
       var imglist=oFrame.getElementsByTagName('IMG') 
       for(var i = 0; i < imglist.length; i ++){
              //alert(imglist[i].src);
              stringStr=stringStr+imglist[i].src+";"+imglist[i].title+",";
        }
       if(stringStr==""){
           alert("你没有选择图片");
           return false;
       }    
       
       document.getElementById("hindGroupImagInfo").value=stringStr;
       return true;     
     }
    </script>
</head>

<body onload="document_onload();">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td height="30" background="tab/images/tab_05.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="12" height="30"><img src="tab/images/tab_03.gif" width="12" height="30" /></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="80%" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="5%"><div align="center"><img src="tab/images/tb.gif" width="16" height="16" /></div></td>
                <td width="95%" class="STYLE1"><span class="STYLE3">你当前的位置</span>：[信息管理]-[图片信息创建]</td>
              </tr>
            </table></td>
            <td width="54%">
			    &nbsp;
			</td>
          </tr>
        </table>

            
        <td width="16"><img src="tab/images/tab_07.gif" width="16" height="30" /></td>
      </tr>
    </table></td>
  </tr>
  <s:form  action="newsAction!pictureNewsInfoAdd.action" method="post" theme="simple" onsubmit="return validateForm();">
   <s:hidden name="hindGroupImagInfo" id="hindGroupImagInfo"/>
    <input type="hidden" name="headImage" id="headImage" value="${headImage}"/>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="8" background="tab/images/tab_12.gif">&nbsp;</td>
        <td><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6" onmouseover="changeto()"  onmouseout="changeback()">
          <tr>
           <td rowspan="3" width="65px"   class="STYLE1">
              <div align="center"><span class="STYLE1">
                      <img id="headImage1"   src="${headImage}" alt="" width="65px" height="50px"/>
                      <input type="button" id="image1" value="选择图片" /></span>
              </div>
           </td>
           <td width="65px"  height="30"    ><div align="center"><span class="STYLE1">信息标题</span></div></td>
            <td  height="30" colspan="6"   ><div align="left"><span class="STYLE1"> <s:textfield name="newsInfo.title" id="newsInfotitle" cssStyle="width:99%;" /></span></div></td>
            
           </tr>
           <tr>
            <td  width="65px"    ><div align="center"><span class="STYLE1">副标题</span></div></td>
            <td  height="22" colspan="6"  ><div align="left"><span class="STYLE1"> <s:textfield name="newsInfo.subtitle" id="newsInfosubtitle" cssStyle="width:99%;" /></span></div></td>
           </tr>
           <tr>
            <td width="65px"     ><div align="right"><span class="STYLE1">状态</span></div></td>
             <td width="10%"    ><div align="center"><span class="STYLE1"><s:radio list="#{'0':'启用','1':'停用'}" name="newsInfo.state"/></span></div></td>
            <td width="10%"    ><div align="right"><span class="STYLE1">显示排序</span></div></td>
            <td width="23%"   ><div align="left"><span class="STYLE1"><s:textfield name="newsInfo.oderView"/> </span></div></td>
            <td width="10%"    class="STYLE1"><div align="right">操作</div></td>
            <td        class="STYLE1"><div align="left"><span class="STYLE1"><input type="button" id="addPicture" value="添加图片" />&nbsp; <input id="oDelButton" type="button" value="删除图片" /></span> </div></td>
          </tr>
          <tr>
            <td height="100%" colspan="8" >
            <p style="color:#FF0000"> <hr width="100%"/> </p>
            <div align="center" class="STYLE1">
              <div align="left" >
              <!-- 内容 -->
                   <!-- Content -->
<div class="videoContainer">
	<video id="myVideo" controls preload="auto" poster="poster.jpg" width="600" height="350" >
	  <source src="http://localhost:8080/ng/common/html5-video/vidoe/iceage4.mp4" type="video/mp4" />
	  <p>Your browser does not support the video tag.</p>
	</video>
	<div class="caption">This is HTML5 video with custom controls</div>
	<div class="control">

		<div class="topControl">
			<div class="progress">
				<span class="bufferBar"></span>
				<span class="timeBar"></span>
			</div>
			<div class="time">
				<span class="current"></span> / 
				<span class="duration"></span> 
			</div>
		</div>
		
		<div class="btmControl">
			<div class="btnPlay btn" title="Play/Pause video"></div>
			<div class="btnStop btn" title="Stop video"></div>
			<div class="spdText btn">Speed: </div>
			<div class="btnx1 btn text selected" title="Normal speed">x1</div>
			<div class="btnx3 btn text" title="Fast forward x3">x3</div>
			<div class="btnFS btn" title="Switch to full screen"></div>
			<div class="btnLight lighton btn" title="Turn on/off light"></div>
			<div class="volume" title="Set volume">
				<span class="volumeBar"></span>
			</div>
			<div class="sound sound2 btn" title="Mute/Unmute sound"></div>
		</div>
		
	</div>
	<div class="loading"></div>
</div>

               <!-- 内容结束 -->
              </div>
             </div>
              <p style="color:#FF0000"> <hr width="100%"/> </p>
              <div align="center">
              <input type="submit" value="提交" />
              </div>
            </td>
            
          </tr>
        </table></td>
        <td width="8" background="tab/images/tab_15.gif">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  
 <!-- <tr>&nbsp;</tr>-->
  <tr>
    <td height="35" background="tab/images/tab_19.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="12" height="35"><img src="tab/images/tab_18.gif" width="12" height="35" /></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="STYLE4">&nbsp;&nbsp</td>
            <td><span class="STYLE1"></span>&nbsp;</td>
          </tr>
        </table></td>
        <td width="16"><img src="tab/images/tab_20.gif" width="16" height="35" /></td>
      </tr>
    </table></td>
  </tr>
  </s:form>
</table>
</body>
</html>

